<template>
    <div>
      <br>
      <br>
      <br>
      <el-select v-model="value" placeholder="省" @change="shiCheng(value)">
        <el-option
          v-for="item in options"
          :key="item.REGION_ID"
          :label="item.REGION_NAME"
          :value="item.REGION_ID">
        </el-option>
      </el-select>
      <el-select v-model="value1" placeholder="市" @change="xianCheng(value1)">
      <el-option
        v-for="item in options1"
        :key="item.REGION_ID"
        :label="item.REGION_NAME"
        :value="item.REGION_ID">
        </el-option>
      </el-select>
      <el-select v-model="value2" placeholder="县" @change="fuzhi(value2)">
      <el-option
        v-for="item in options2"
        :key="item.REGION_ID"
        :label="item.REGION_NAME"
        :value="item.REGION_ID">
        </el-option>
      </el-select>
      <el-input v-model="form.name" placeholder="请输入楼盘名称关键字" style="width: 200px"></el-input>
      <el-button type="primary" @click="list">提交</el-button>
      <br>
      <br>
      <br>
      <br>
      <el-radio v-model="radio" label="1">未看房</el-radio>
      <el-radio v-model="radio" label="2">已看房</el-radio>
      <el-button @click="getStatus" type="warning">批量设置状态</el-button>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="id"
          width="200">
        </el-table-column>
        <el-table-column
          prop="name"
          label="楼盘名称"
          width="200">
        </el-table-column>
        <el-table-column
          prop="showingsName"
          label="预约人"
          width="200">
        </el-table-column>
        <el-table-column
          prop="showingsMobile"
          label="联系人电话"
          width="200">
        </el-table-column>
        <el-table-column
          prop="roomName"
          label="预约房源"
          width="200">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="预约时间"
          width="200">
        </el-table-column>
        <el-table-column
          prop="statusName"
          label="状态"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[4, 8, 16, 32]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
 import {listTermination,updateStatus,getAuthRole } from "@/api/weishu/root";
    export default {
      data() {
        return {
          loading:null,
          tableData: [],
          multipleSelection: [],
          currentPage4: 1,
          radio: '',
          // 总条数
          total: 0,
          // 查询参数
          form: {
            pageNum: 1,
            pageSize: 4,
            name:'',
            province:0,
            city:0,
            county:0
          },
          options: [],
          options1: [],
          options2: [],
          value: '',
          value1: '',
          value2: ''
        }
      },
      created() {
        this.list();
        this.getRegion(1)
      },

      methods: {
        fuzhi(id){
          this.form.county=id
        },
        xianCheng(id){
          console.log("县方法中传的数据"+id)
          getAuthRole(id).then(ref=>{
            this.options2=ref
            this.form.city=id
            this.form.county=0
          })
        },
        shiCheng(id){
          this.options1 = null;
          getAuthRole(id).then(ref=>{
            this.options1=ref
            this.options2= undefined;
            this.form.province=id
            this.form.city=0
            this.form.county=0
          })
        },
        getRegion(id){
          getAuthRole(id).then(ref=>{
            this.options=ref
            this.options1=undefined
          })
        },
        getStatus(){
          if (this.radio==1){
            this.multipleSelection.forEach(mution=>{
              mution.status=0
            })
          }else{
            this.multipleSelection.forEach(mution=>{
              mution.status=1
            })
          }
          updateStatus(this.multipleSelection).then(ref=>{
            console.log(ref)
            this.list()
          })
          },
        list() {
          listTermination(this.form).then(response => {
            this.loading = true;
            response.rows.forEach(row=>{
              if (row.status===0){
                row.statusName="未看房"
              }else{
                row.statusName="已看房"
              }
            })
            this.tableData = response.rows;
            this.total = response.total;
            this.loading = false;
          })
        },
        handleSizeChange(val) {
          this.form.pageSize=val
          console.log(`每页 ${val} 条`);
          this.list()
        },
        handleCurrentChange(val) {
          this.form.pageNum=val
          console.log(`当前页: ${val}`);
          this.list()
        },
        handleSelectionChange(val){
          console.log(val)
            this.multipleSelection = val;
        }
      }
    }
</script>

<style scoped>

</style>
